<template>
  <div>
    <!-- 頭部 -->
    <van-nav-bar>
      <template #left>
        <div class="titel"> <i
            class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow"
            @click="onClickLeft"
          ></i> 任务大厅</div>
      </template>
      <template #right>
        <router-link class="my-missions" to="/myReceiveTask">
            <img src="@/assets/images/icon7.png" />
            <div>我的任务</div>
        </router-link>
        <router-link class="add" to="/add">
            <img src="@/assets/images/add.png" />
            <div>发任务</div>
        </router-link>
      </template>
    </van-nav-bar>
    <div class="search-body">
      <div>
        <van-search
          v-model="pages.keywords"
          placeholder="请输入搜索关键词"
          @search="onSearch()"
          class="search-input"
        />
      </div>
    </div>

    <!-- body -->
    <div class="code-body">
      <div
        v-for="item in labelsBoxData"
        :key="item"
      >
        <LabelsBox
          :data="item"
          @run-parent="getChild"
        ></LabelsBox>
      </div>
    </div>
    <div
      class="code-px"
      @click="solct"
    >
      共查询到 {{ data.maxCount }}条 相关任务
      <span>{{pages.isTimeDesc == 0 ?'时间由远及近':'时间由近及远'}} <img
          src="@/assets/images/pxdown.png"
          alt=""
        /></span>
    </div>
    <div class="code-body-list">
      <van-list
        v-model="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          v-for="item in listData"
          :key="item"
        >
          <TaskCards
            :data="item"
            @run-parent="getTask"
          ></TaskCards>
        </div>
      </van-list>
    </div>
    <!-- 底部 -->
    <van-tabbar
      v-model="active"
      class="tabbar"
      :before-change="changeTabbar"
    >
      <van-tabbar-item>
        <span>任务大厅</span>
        <template #icon>
          <img src="@/assets/images/icon1x.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item @click="toSalary()">
        <span>组员薪资</span>
        <template #icon>
          <img src="@/assets/images/icon2.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item @click="toReward()">
          <span>小组奖金</span>
          <template #icon>
              <img src="@/assets/images/icon3.png" />
          </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="less" scoped>
.titel {
  color: #000;
  font-size: 36px;
  font-weight: 500;
}
.add {
  display: flex;
  margin-left: 10px;
  img {
    width: 40px;
    height: 40px;
  }
  div {
    color: #288ef4;
    margin-left: 5px;
    font-size: 28px;
  }
}
.my-missions {
  display: flex;
  color: #666666;
  font-size: 28px;
  margin-right: 5px;
  img {
    width: 36px;
    height: 38px;
    margin-right: 5px;
  }
}
.search-body {
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  margin-bottom: 0.3125rem;
}
.code-body {
  background: #fff;
  padding: 30px;
  >div{
    &:first-child{
      border-bottom: 1px solid #E8E8E8;
    }
  }
}
.code-body-list {
  margin-bottom: 200px;
}
.code-px {
  text-align: left;
  padding: 30px;
  font-size: 26px;
  color: #666666;
  span {
    float: right;
    color: #288ef4;
    img {
      width: 24px;
      height: 24px;
      padding-left: 5px;
    }
  }
}
</style>
<script>
import {
  Button,
  Icon,
  NavBar,
  Tabs,
  Tab,
  Tabbar,
  TabbarItem,
  Search,
  Toast,
  List
} from "vant";
import httpRequest from "../../util/httpRequest";
import maps from "@/util/maps";
import LabelsBox from "@/components/labelsBox.vue";
import TaskCards from "@/components/task/TaskCards.vue";
import { useRouter } from "vue-router";

export default {
  components: {
    [Button.name]: Button,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Search.name]: Search,
    [List.name]: List,
    [Toast.name]: Toast,
    LabelsBox,
    TaskCards
  },
  data() {
    return {
      router: useRouter(),
      listData: [],
      data: {},
      state: {
        maxPage: 1,
        loading: false
      },
      pages: {
        currentPage: 1,
        pageSize: 10,
        platformType: 1,
        isTimeDesc: 1
      },
      labelsBoxData: [],
      value: "",
      checked: false,
      active:0,
      isLoad:false,
      isJoinTeam:false
    };
  },
  created(){
    httpRequest.post('getMyTeamSummary',{}).then(res=>{
      this.isJoinTeam = res.data ? true : false;
    });
    httpRequest.get('userInfo',{}).then(res=>{
      localStorage.setItem("user",JSON.stringify(res.data.userInfo));
    });
  },
  // 注意：组件挂载后才能访问到 ref 对象
  mounted() {

    maps.getDepts().then(e => {
      this.labelsBoxData = [
        {
          titel: "部门筛选",
          styleType: "B",
          lebType: "sourceDeptIdArr",
          labels: e
        },
        {
          titel: "紧急程度",
          lebType: "urgentLevelArr",
          styleType: "B",
          labels: maps["urgentLevelLabMap"]
        }
      ];
      // eslint-disable-next-line no-unused-vars
      maps.getTagNums().then(e => {
        let labels = this.labelsBoxData[0].labels;
        for (let i = 0; i < labels.length; i++) {
          const id = labels[i].id;
          const num = maps.getDeptTaskNum(id);
          labels[i].num = num ? num : "";
        }
      });
      // eslint-disable-next-line no-unused-vars
      maps.getTagNums().then(e => {
        let labels = this.labelsBoxData[1].labels;
        for (let i = 0; i < labels.length; i++) {
          const id = labels[i].id;
          const num = maps.getUrgentTaskNum(id);
          labels[i].num = num ? num : "";
        }
      });
    });

    this.init();
  },
  methods: {
    init() {
      httpRequest.post("查询任务列表", this.pages).then(res => {
        this.data = res["data"];
        this.listData = res["data"]["data"].map(e=>{
          e.content = e.content ? e.content.replace(/\n/g,"<br />") : "";
          if(e.taskAcceptList && e.taskAcceptList.length > 0){
            e.taskAcceptList = e.taskAcceptList.map(e2=>{
              e2.ac_finish_remak = e2.ac_finish_remak ? e2.ac_finish_remak.replace(/\n/g,"<br />") : "";
              e2.ac_remak = e2.ac_remak ? e2.ac_remak.replace(/\n/g,"<br />") : "";
              return e2;
            })
          }
          return e;
        });
        this.pages.currentPage = this.data.currentPage;
        this.state.maxPage = this.data.maxCount / this.data.pageSize;
        // this.state.maxPage = this.data.maxCount / this.data.pageSize;
      });
    },
    onSearch() {
      this.pages.currentPage = 1;
      this.init();
    },
    getChild(data) {
      console.log("1231234512345",data);
      this.pages.currentPage = 1;
      this.pages[data.type] = data.arr;
      this.init();
    },
    getTask(data) {
      // console.log('data:',data)
      if (data.type == "toDEL") {
        this.router.push({
          path: "/del",
          query: {
            taskId: data.taskId,
            type: 0
          }
        });
      } else {
        this.router.push({
          path: "/jd",
          query: {
            taskId: data.taskId
          }
        });
      }
    },
    onLoad() {
      if (this.pages.currentPage < this.state.maxPage && !this.isLoad) {
        this.isLoad = true;
        this.pages.currentPage++;
          httpRequest.post("查询任务列表", this.pages).then(res => {
            Toast("刷新成功");
            this.isLoad = false;
            this.state.loading = false;
            this.data = res["data"];
            this.data.data = this.data.data.map(e=>{
              e.content = e.content ? e.content.replace(/\n/g,"<br />") : "";
              if(e.taskAcceptList && e.taskAcceptList.length > 0){
                e.taskAcceptList = e.taskAcceptList.map(e2=>{
                  e2.ac_finish_remak = e2.ac_finish_remak ? e2.ac_finish_remak.replace(/\n/g,"<br />") : "";
                  e2.ac_remak = e2.ac_remak ? e2.ac_remak.replace(/\n/g,"<br />") : "";
                  return e2;
                })
              }
              return e;
            });
            for (let i = 0; i < this.data.data.length; i++) {
              const data = this.data.data[i];
              this.listData.push(data);
            }
            this.pages.currentPage = this.data.currentPage;
            this.state.maxPage = this.data.maxCount / this.data.pageSize;
          });
      } else {
        // Toast("没有新的任务了");
        this.state.loading = false;
      }
    },
    solct() {
      this.pages.isTimeDesc = this.pages.isTimeDesc == 1 ? 0 : 1;
      this.pages.currentPage = 1;
      this.init();
    },
    onClickLeft() {
      //this.$router.go(-1)
      const u = navigator.userAgent;
      const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isAndroid) {
        const NATIVE = window.NATIVE;
        if (NATIVE) {
          // eslint-disable-next-line no-irregular-whitespace
          // 判断 launcher 对象是否存在
          NATIVE.PAGE_CLOSE();
        } else {
          alert("launcher not found!");
        }
      } else if (isiOS) {
        const KKJSBridge = window.KKJSBridge;
        KKJSBridge.call("EYJSModule", "pageClose", {}, function(res) {
          console.log("closePage", res);
        });
      }
      console.log("isiOS:",isiOS)
      console.log("isAndroid:",isAndroid)
    },
    toReward(){
      // Toast("该功能暂未开放");
      this.$router.push('/groupSalary');
    },
    toSalary(){
      if(this.isJoinTeam){
        this.$router.push('/salary');
      }else{
        Toast("你目前还没加入任何小组，暂时无法访问该功能");
      }
    },
    changeTabbar() {
        return false;
    },
  }
};
</script>
